<template>
	<view class="my-page">
		<u-navbar title="我的" bgColor="rgba(0,0,0,0)" placeholder leftIcon=""></u-navbar>
		<view style="width: 90vw;display: flex;align-items: center;justify-content: space-between;">
			<view class="user-item" @click="loginClick">
				<u-avatar size="60"></u-avatar>
				<view style="display: flex;flex-direction: column;gap: 10rpx;">
					<p style="font-weight: bold;">{{userInfo.nickName || '请登录'}} {{userInfo.role == 1 ? '(业务员)' : ''}}</p>
					<p style="font-size: 0.8rem;">{{userInfo.phone || '无'}}</p>
				</view>
			</view>
			<view style="font-size: 0.8rem;color: #989898;" @click="clearClick">
				退出登录
			</view>
		</view>

		<view class="order-card">
			<view @click="allOrder" class="order-sub-card">
				<img style="width: 70rpx;height: 70rpx;" src="/static/my/order.svg" alt="" />
				<p>全部订单</p>
			</view>
			<view @click="waitToPay" class="order-sub-card">
				<img style="width: 70rpx;height: 70rpx;" src="/static/my/pay.svg" alt="" />
				<p>待付款</p>
			</view>
			<view @click="waitToGo" class="order-sub-card">
				<img style="width: 70rpx;height: 70rpx;" src="/static/my/travel.svg" alt="" />
				<p>待出行</p>
			</view>
			<view @click="payback" class="order-sub-card">
				<img style="width: 70rpx;height: 70rpx;" src="/static/my/refund.svg" alt="" />
				<p>退款售后</p>
			</view>
		</view>

		<view class="service-card">
			<p style="font-weight: bold;margin: 20rpx;">我的服务</p>
			<u-cell v-if="userInfo.role == 1" icon="account" title="业务员中心" @click="onSalesmanTo" isLink></u-cell>
			<u-cell v-else icon="account" title="个人信息" @click="onPrivateTo" isLink></u-cell>
			<u-cell icon="order" title="用户协议" isLink @click="contrastClick"></u-cell>
			<u-cell icon="kefu-ermai" title="联系客服" isLink></u-cell>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { useGlobalStore } from '@/stores/global.js'

	const globalStore = useGlobalStore()
	
	const userInfo = globalStore.userInfo

	// 登录页面
	function clearClick() {
		uni.showModal({
			title: '确认是否要退出登录？',
			success(res) {
				if (res.confirm) {
					uni.reLaunch({
						url: '/pages/login'
					})
				}
			},
		})
	}

	// 业务员中心
	function onSalesmanTo() {
		uni.navigateTo({
			url: '/pages/my/salesman/index'
		})
	}

	// 个人信息
	function onPrivateTo() {
		uni.navigateTo({
			url: '/pages/my/private/index'
		})
	}

	function contrastClick() {
		uni.navigateTo({
			url: '/pages/my/userContrast'
		})

	}
	
	function allOrder(){
		globalStore.setTabIndex(0);
		uni.switchTab({
      url: `/pages/trip/trip`
    })
	}
	function waitToPay(){
		globalStore.setTabIndex(1);
		uni.switchTab({
      url: `/pages/trip/trip`
    })
	}
	function waitToGo(){
		globalStore.setTabIndex(2);
		uni.switchTab({
      url: `/pages/trip/trip`
    })
	}
	function payback(){
		globalStore.setTabIndex(3);
		uni.switchTab({
      url: `/pages/trip/trip`
    })
		
	}
	
</script>

<style scoped scss>
	.my-page {
		height: 100vh;
		background: linear-gradient(to bottom,
				#d4e8ff 10%,
				#fcfeff 20%,
				#d4e8ff 30%,
				#ffffff 100%);

		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.user-item {
		/* width: 90vw; */
		display: flex;
		padding: 50rpx 0;
		align-items: center;
		gap: 20rpx;
	}

	.order-card {
		width: 90vw;
		background-color: white;
		border-radius: 20rpx;
		padding: 25rpx;

		display: flex;
		justify-content: space-between;
	}

	.order-sub-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10rpx;
	}

	.service-card {
		margin-top: 35rpx;
		width: 90vw;
		background-color: white;
		border-radius: 20rpx;
	}
</style>